//
// Theme
// --------------------------------------------------

@mixin color-theme($brand-primary,
                   $brand-light,
                   $brand-lighter,
                   $brand-dark,
                   $brand-darker,
                   $body-bg,
                   $body-bg-dark,
                   $body-bg-light,
                   $body-color,
                   $body-color-dark,
                   $body-color-light,
                   $link-color,
                   $link-hover-color,
                   $headings-color,
                   $input-btn-focus-color,
                   $input-btn-focus-box-shadow,
                   $input-bg,
                   $input-color,
                   $input-border-color,
                   $input-focus-bg,
                   $input-focus-color,
                   $input-focus-border-color,
                   $header-bg,
                   $header-dark-bg,
                   $sidebar-bg,
                   $sidebar-dark-bg,
                   $side-overlay-bg) {
    // Scaffolding
    body {
        color: $body-color;
        background-color: $body-bg;
    }

    // Links
    a {
        color: $link-color;

        &.link-fx::before {
            background-color: $link-color;
        }

        @include hover {
            color: $link-hover-color;
        }
    }

    // Typography
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
        color: $headings-color;
    }

    .content-heading {
        border-bottom-color: $body-bg-dark;
    }

    hr {
        border-top-color: $body-bg-dark;
    }

    // Contextual text colors
    @include text-emphasis-variant('.text-primary', $brand-primary);
    @include text-emphasis-variant('.text-primary-dark', $brand-dark);
    @include text-emphasis-variant('.text-primary-darker', $brand-darker);
    @include text-emphasis-variant('.text-primary-light', $brand-light);
    @include text-emphasis-variant('.text-primary-lighter', $brand-lighter);

    @include text-emphasis-variant('.text-body-bg', $body-bg);
    @include text-emphasis-variant('.text-body-bg-light', $body-bg-light);
    @include text-emphasis-variant('.text-body-bg-dark', $body-bg-dark);

    @include text-emphasis-variant('.text-body-color', $body-color);
    @include text-emphasis-variant('.text-body-color-dark', $body-color-dark);
    @include text-emphasis-variant('.text-body-color-light', $body-color-light);

    // Contextual dual text colors (for dark header/sidebar)
    @include text-emphasis-variant('.text-dual', $brand-dark);

    .page-header-dark #page-header,
    .sidebar-dark #sidebar {
        @include text-emphasis-variant('.text-dual', $body-color-light);
    }

    // Contextual background colors
    @include bg-variant('.bg-primary', $brand-primary);
    @include bg-variant('.bg-primary-op', rgba($brand-primary, .75));
    @include bg-variant('.bg-primary-dark', $brand-dark);
    @include bg-variant('.bg-primary-dark-op', rgba($brand-dark, .8));
    @include bg-variant('.bg-primary-darker', $brand-darker);
    @include bg-variant('.bg-primary-light', $brand-light);
    @include bg-variant('.bg-primary-lighter', $brand-lighter);
    @include bg-variant('.bg-body', $body-bg);
    @include bg-variant('.bg-body-light', $body-bg-light);
    @include bg-variant('.bg-body-dark', $body-bg-dark);

    // Elements
    @include bg-variant('.bg-header-light', $header-bg);
    @include bg-variant('.bg-header-dark', $header-dark-bg);

    @include bg-variant('.bg-sidebar-light', $sidebar-bg);
    @include bg-variant('.bg-sidebar-dark', $sidebar-dark-bg);

    // Buttons
    .btn-link {
        color: $link-color;

        @include hover {
            color: $link-hover-color;
        }
    }

    .btn-primary {
        @include button-variant($brand-primary, $brand-primary);
    }

    .btn-outline-primary {
        @include button-outline-variant($brand-primary);
    }

    // Used for buttons that adapt to light/dark header and sidebar variations
    .page-header-dark #page-header .btn-dual,
    .sidebar-dark #sidebar .btn-dual {
        @include button-dual-variant($white, lighten($brand-dark, 9%), lighten($brand-dark, 9%));
    }

    // Alerts
    .alert-primary {
        @include alert-variant($brand-lighter, $brand-lighter, $brand-dark);
    }

    // Badges
    .badge-primary {
        @include badge-variant($brand-primary);
    }

    // Progress Bars
    .progress-bar {
        background-color: $brand-primary;
    }

    // Nav links
    .nav-link {
        color: $body-color;

        @include hover-focus {
            color: $brand-primary;
        }
    }

    // Nav Pills
    .nav-pills {
        .nav-link {
            color: $body-color;

            @include hover-focus {
                background-color: $body-bg;
            }
        }

        .nav-link.active,
        .show > .nav-link {
            background-color: $brand-primary;
        }
    }

    // Nav Tabs
    .nav-tabs {
        border-bottom-color: $body-bg-dark;

        .nav-link {
            @include hover-focus {
                border-color: $body-bg-dark $body-bg-dark $body-bg-dark;
            }
        }

        .nav-link.active,
        .nav-item.show .nav-link {
            border-color: $body-bg-dark $body-bg-dark $white;
        }
    }

    // Tabs block variation
    .nav-tabs-block {
        background-color: $body-bg-light;

        .nav-link {
            border-color: transparent;
            color: $body-color;

            @include hover-focus {
                color: $brand-primary;
                background-color: $body-bg-light;
                border-color: transparent;
            }
        }

        .nav-link.active,
        .nav-item.show .nav-link {
            color: $body-color;
            background-color: $white;
            border-color: transparent;
        }
    }

    // Tabs block alternative variation
    .nav-tabs-alt {
        border-bottom-color: $body-bg-dark;

        .nav-link {
            color: $body-color;
            background-color: transparent;
            border-color: transparent;

            @include hover-focus {
                color: $brand-primary;
                background-color: transparent;
                border-color: transparent;
                box-shadow: inset 0 -3px $brand-primary;
            }
        }

        .nav-link.active,
        .nav-item.show .nav-link {
            color: $body-color;
            background-color: transparent;
            border-color: transparent;
            box-shadow: inset 0 -3px $brand-primary;
        }
    }

    // Various Items Navigation
    .nav-items {
        a {
            border-bottom-color: $body-bg;

            @include hover {
                background-color: $body-bg-light;
            }

            &:active {
                background-color: $body-bg;
            }
        }

        > li:last-child > a {
            border-bottom: none;
        }
    }

    // Pagination
    .page-item {
        &.active .page-link {
            color: $brand-primary;
            background-color: $body-bg-light;
            border-color: $brand-primary;
        }
    }

    .page-link {
        color: $body-color;

        &:hover {
            color: $brand-primary;
            border-color: $brand-primary;
        }

        &:focus {
            background-color: $body-bg;
        }
    }

    // List Group
    .list-group-item-action {
        color: $body-color;

        @include hover-focus {
            color: $body-color;
            background-color: $body-bg-light;
        }

        &:active {
            color: $body-color;
            background-color: $body-bg-dark;
        }
    }

    .list-group-item {
        border-color: $body-bg-dark;

        &.active {
            color: $white;
            background-color: $brand-primary;
            border-color: $brand-primary;
        }
    }

    // Popovers
    .popover {
        border-color: $body-bg-dark;
    }

    .bs-popover-top {
        .arrow::before {
            border-top-color: fade-in($body-bg-dark, .05);
        }

        .arrow::after {
            border-top-color: $white;
        }
    }

    .bs-popover-right {
        .arrow::before {
            border-right-color: fade-in($body-bg-dark, .05);
        }

        .arrow::after {
            border-right-color: $white;
        }
    }

    .bs-popover-bottom {
        .arrow::before {
            border-bottom-color: fade-in($body-bg-dark, .05);
        }

        .arrow::after {
            border-bottom-color: $white;
        }
    }

    .bs-popover-left {
        .arrow::before {
            border-left-color: fade-in($body-bg-dark, .05);
        }

        .arrow::after {
            border-left-color: $white;
        }
    }

    .bs-popover-auto {
        &[x-placement^="top"] {
            @extend .bs-popover-top;
        }
        &[x-placement^="right"] {
            @extend .bs-popover-right;
        }
        &[x-placement^="bottom"] {
            @extend .bs-popover-bottom;
        }
        &[x-placement^="left"] {
            @extend .bs-popover-left;
        }
    }

    // Modals
    .modal-header {
        border-bottom-color: $body-bg-dark;
    }

    .modal-footer {
        border-top-color: $body-bg-dark;
    }

    // Dropdowns
    .dropdown-menu {
        border-color: $body-bg-dark;
    }

    .dropdown-divider {
        @include nav-divider($body-bg);
    }

    .dropdown-item {
        color: $body-color;

        @include hover-focus {
            color: $body-color-dark;
            background-color: $body-bg;
        }

        &.active,
        &:active {
            color: $white;
            background-color: $brand-primary;
        }
    }

    .dropdown-header {
        color: $headings-color;
    }

    // Tables
    .table {
        th,
        td {
            border-top-color: $body-bg-dark;
        }

        thead th {
            border-bottom-color: $body-bg-dark;
        }

        tbody + tbody {
            border-top-color: $body-bg-dark;
        }
    }

    .table-bordered {
        &,
        th,
        td {
            border-color: $body-bg-dark;
        }
    }

    .table-striped {
        tbody tr:nth-of-type(odd) {
            background-color: lighten($body-bg, 1.5%);
        }
    }

    .table-hover {
        tbody tr {
            @include hover {
                background-color: darken($body-bg, 1.5%);
            }
        }
    }

    @include table-row-variant("active", darken($body-bg, 1.5%));
    @include table-row-variant("primary", $brand-lighter);

    .table {
        .thead-dark {
            th {
                background-color: $brand-dark;
                border-color: $brand-dark;
            }
        }

        .thead-light {
            th {
                background-color: $body-bg-dark;
                border-color: $body-bg-dark;
            }
        }
    }

    // Forms
    .form-control {
        color: $input-color;
        background-color: $input-bg;
        border-color: $input-border-color;

        &:focus {
            color: $input-focus-color;
            background-color: $input-focus-bg;
            border-color: $input-focus-border-color;
            box-shadow: $input-btn-focus-box-shadow;
        }

        &:disabled,
        &[readonly] {
            background-color: $input-disabled-bg;
        }
    }

    select.form-control {
        &:focus::-ms-value {
            color: $input-color;
            background-color: $input-bg;
        }
    }

    .custom-control-primary {
        @include custom-control-variant($body-bg-dark, $brand-primary);
    }

    .custom-control-input {
        &:checked ~ .custom-control-label::before {
            @include gradient-bg($brand-primary);
        }

        &:focus ~ .custom-control-label::before {
            box-shadow: 0 0 0 1px $white, $input-btn-focus-box-shadow;
        }

        &:active ~ .custom-control-label::before {
            background-color: lighten($brand-primary, 35%);
        }
    }

    .custom-control-label {
        &::before {
            background-color: $body-bg-dark;
        }
    }

    .custom-checkbox {
        .custom-control-input:checked ~ .custom-control-label {
            &::before {
                @include gradient-bg($brand-primary);
            }
        }

        .custom-control-input:indeterminate ~ .custom-control-label {
            &::before {
                @include gradient-bg($brand-primary);
            }
        }
    }

    .custom-radio {
        .custom-control-input:checked ~ .custom-control-label {
            &::before {
                @include gradient-bg($brand-primary);
            }
        }
    }

    .custom-select {
        border-color: $input-border-color;

        &:focus {
            border-color: $input-focus-border-color;
            box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($input-focus-border-color, .5);

            &::-ms-value {
                color: $input-color;
                background-color: $input-bg;
            }
        }
    }

    .custom-file-input {
        &:focus ~ .custom-file-label {
            border-color: $input-focus-border-color;
            box-shadow: $input-btn-focus-box-shadow;

            &::after {
                border-color: $input-focus-border-color;
            }
        }
    }

    .custom-file-label {
        color: $input-color;
        background-color: $input-bg;
        border-color: $input-border-color;

        &::after {
            color: $input-color;
            @include gradient-bg($body-bg-dark);
            border-left-color: $input-border-color;
        }
    }

    @include form-validation-state("valid", theme-color('success'));
    @include form-validation-state("invalid", theme-color('danger'));

    .form-control.form-control-alt {
        border-color: $body-bg;
        background-color: $body-bg;

        &:focus {
            border-color: $body-bg-dark;
            background-color: $body-bg-dark;
            box-shadow: none;
        }
    }

    .input-group-text {
        color: $input-color;
        background-color: $body-bg;
        border-color: $input-border-color;
    }

    .input-group-text.input-group-text-alt {
        background-color: $body-bg-dark;
        border-color: $body-bg-dark;
    }

    // Border
    .border { border-color: $body-bg-dark !important; }
    .border-top { border-top-color: $body-bg-dark !important; }
    .border-right { border-right-color: $body-bg-dark !important; }
    .border-bottom { border-bottom-color: $body-bg-dark !important; }
    .border-left { border-left-color: $body-bg-dark !important; }

    @each $color, $value in $theme-colors {
        .border-#{$color} {
            border-color: $value !important;
        }
    }

    .border-primary { border-color: $brand-primary !important; }
    .border-white { border-color: $white !important; }
    .border-white-op { border-color: rgba($white,.1) !important; }
    .border-black-op { border-color: rgba($black,.1) !important; }

    // Main Structure
    #page-header { background-color: $header-bg; }
    #sidebar { background-color: $sidebar-bg; }
    #side-overlay { background-color: $side-overlay-bg; }

    // Layout/Style variations based on #page-container classes
    #page-container {
        // Page header
        &.page-header-dark #page-header {
            color: darken($body-color-light, 8%);
            background-color: $header-dark-bg;
        }

        &.page-header-glass {
            #page-header {
                background-color: transparent;
            }

            &.page-header-fixed {
                &.page-header-scroll #page-header {
                    background-color: $header-bg;
                }

                &.page-header-scroll.page-header-dark #page-header {
                    background-color: $header-dark-bg;
                }
            }
        }

        // Sidebar and Side Overlay
        &.sidebar-dark #sidebar {
            color: $body-color-light;
            background-color: $sidebar-dark-bg;
        }
    }

    // Blocks
    .block-header-default { background-color: $body-bg-light; }

    // Block Variations
    .block {
        &.block-bordered {
            border-color: $body-bg-dark;
        }

        &.block-themed > .block-header {
            background-color: $brand-primary;
        }
    }

    // Block Modes
    .block {
        &.block-mode-loading {
            &::after {
                color: $brand-dark;
            }

            &.block-mode-loading-dark::after {
                background-color: $brand-dark;
            }
        }
    }

    // Block Links
    a.block {
        color: $body-color;

        @include hover {
            color: $body-color;
        }

        &.block-link-pop {
            &:hover {
                box-shadow: 0 .5rem 2rem darken($body-bg, 8%);
            }

            &:active {
                box-shadow: 0 .25rem .75rem darken($body-bg, 1%);
            }
        }

        &.block-link-shadow {
            &:hover {
                box-shadow: 0 0 2.25rem darken($body-bg, 8%);
            }

            &:active {
                box-shadow: 0 0 1.125rem darken($body-bg, 4%);
            }
        }
    }

    // Block Effects
    .block {
        &.block-fx-shadow {
            box-shadow: 0 0 2.25rem darken($body-bg, 8%);
        }

        &.block-fx-pop {
            box-shadow: 0 .5rem 2rem darken($body-bg, 8%);
        }
    }

    // Page Loader
    #page-loader::after {
        background-color: $brand-primary;
    }

    // Main Navigation
    // Headings
    .nav-main-heading {
        color: lighten($body-color, 25%);
    }

    // Default links
    .nav-main-link {
        color: $body-color;

        .nav-main-link-icon {
            color: lighten($body-color, 35%);
        }

        &:hover {
            color: $body-color;
            background-color: $body-bg-light;

            > .nav-main-link-icon {
                color: $black;
            }
        }

        &.active {
            color: $black;

            > .nav-main-link-icon {
                color: $black;
            }
        }
    }

    // Sub menus
    .nav-main-submenu {
        .nav-main-link {
            color: lighten($body-color, 10%);

            &:hover,
            &.active {
                color: $black;
                background-color: transparent;
            }
        }
    }

    // Active sub menu
    .nav-main-item.open {
        > .nav-main-link-submenu {
            color: $black;
        }
    }

    .nav-main-submenu .nav-main-item.open .nav-main-link {
        background-color: transparent;
    }

    // Various Items Navigation
    .nav-items {
        a {
            border-bottom-color: $body-bg;

            @include hover {
                background-color: $body-bg-light;
            }
        }
    }

    // Activity
    .list-activity {
        > li {
            border-bottom-color: $body-bg;
        }
    }

    // Timeline
    .timeline-event-icon {
        box-shadow: 0 .375rem 1.5rem darken($body-bg, 8%);
    }

    // Bootstrap Datepicker
    .datepicker table tr td.active:hover,
    .datepicker table tr td.active:hover:hover,
    .datepicker table tr td.active.disabled:hover,
    .datepicker table tr td.active.disabled:hover:hover,
    .datepicker table tr td.active:focus,
    .datepicker table tr td.active:hover:focus,
    .datepicker table tr td.active.disabled:focus,
    .datepicker table tr td.active.disabled:hover:focus,
    .datepicker table tr td.active:active,
    .datepicker table tr td.active:hover:active,
    .datepicker table tr td.active.disabled:active,
    .datepicker table tr td.active.disabled:hover:active,
    .datepicker table tr td.active.active,
    .datepicker table tr td.active:hover.active,
    .datepicker table tr td.active.disabled.active,
    .datepicker table tr td.active.disabled:hover.active,
    .open .dropdown-toggle.datepicker table tr td.active,
    .open .dropdown-toggle.datepicker table tr td.active:hover,
    .open .dropdown-toggle.datepicker table tr td.active.disabled,
    .open .dropdown-toggle.datepicker table tr td.active.disabled:hover,
    .datepicker table tr td span.active:hover,
    .datepicker table tr td span.active:hover:hover,
    .datepicker table tr td span.active.disabled:hover,
    .datepicker table tr td span.active.disabled:hover:hover,
    .datepicker table tr td span.active:focus,
    .datepicker table tr td span.active:hover:focus,
    .datepicker table tr td span.active.disabled:focus,
    .datepicker table tr td span.active.disabled:hover:focus,
    .datepicker table tr td span.active:active,
    .datepicker table tr td span.active:hover:active,
    .datepicker table tr td span.active.disabled:active,
    .datepicker table tr td span.active.disabled:hover:active,
    .datepicker table tr td span.active.active,
    .datepicker table tr td span.active:hover.active,
    .datepicker table tr td span.active.disabled.active,
    .datepicker table tr td span.active.disabled:hover.active,
    .open .dropdown-toggle.datepicker table tr td span.active,
    .open .dropdown-toggle.datepicker table tr td span.active:hover,
    .open .dropdown-toggle.datepicker table tr td span.active.disabled,
    .open .dropdown-toggle.datepicker table tr td span.active.disabled:hover {
        background-color: $brand-primary;
        border-color: $brand-primary;
    }

    // CKEditor
    .cke_chrome {
        border-color: $body-bg-dark !important;
    }

    .cke_top {
        border-bottom-color: $body-bg-dark !important;
        background: $body-bg-light !important;
    }

    .cke_bottom {
        border-top-color: $body-bg-dark !important;
        background: $body-bg-light !important;
    }

    // DropzoneJS
    .dropzone {
        background-color: $body-bg-light;
        border-color: $input-border-color;

        .dz-message {
            color: $body-color;
        }

        @include hover {
            background-color: $white;
            border-color: $brand-primary;

            .dz-message {
                color: $brand-primary;
            }
        }
    }

    // FullCalendar
    .fc-bootstrap4 {
        a.fc-event:not([href]):not([tabindex]) {
            color: $body-color-dark;
        }

        .fc-event {
            color: $body-color-dark;

            @include hover {
                color: $body-color;
            }
        }

        thead th.fc-day-header {
            background-color: $body-bg-light;
        }

        th,
        td,
        thead,
        tbody,
        .fc-divider,
        .fc-row,
        .fc-content,
        .fc-popover,
        .fc-list-view,
        .fc-list-heading td,
        .fc-list-table.table {
            border-color: $body-bg-dark;
        }

        .fc-divider,
        .fc-list-heading td,
        .fc-popover .fc-header {
            background: $body-bg;
        }

        .fc-today {
            background: $body-bg-light;
        }
    }

    // Ion Range Slider
    .irs {
        &-line {
            background: $body-bg;
        }

        &-bar {
            background: $brand-primary;

            &-edge {
                background: $brand-primary;
            }
        }

        &-from,
        &-to,
        &-single {
            background: $brand-primary;
        }

        &-grid-pol {
            background: $brand-primary;
        }
    }

    // Select2
    .select2-container--default {
        .select2-selection--single {
            border-color: $input-border-color;
        }

        .select2-selection--multiple {
            border-color: $input-border-color;
        }

        &.select2-container--focus .select2-selection--multiple,
        &.select2-container--focus .select2-selection--single,
        &.select2-container--open .select2-selection--multiple,
        &.select2-container--open .select2-selection--single {
            border-color: $input-focus-border-color;
            box-shadow: $input-btn-focus-box-shadow;
        }

        .select2-selection--multiple {
            .select2-selection__choice {
                background-color: $brand-primary;
            }
        }

        .select2-search--dropdown .select2-search__field {
            border-color: $input-border-color;
        }

        .select2-results__option--highlighted[aria-selected] {
            background-color: $brand-primary;
        }
    }

    // Simple Bar
    .simplebar-scrollbar::before {
        background: $brand-darker;

        .sidebar-dark #sidebar & {
            background: $brand-lighter;
        }
    }

    // Slick
    .slick-slider {
        .slick-prev,
        .slick-next {
            &::before {
                color: $brand-dark;
            }
        }
    }

    // Simple MDE
    .editor-toolbar {
        border-color: $body-bg-dark;
        background-color: $body-bg-light;
    }

    .CodeMirror {
        border-color: $body-bg-dark;
    }

    // Summernote
    .note-editor.note-frame {
        border-color: $body-bg-dark;

        .note-toolbar {
            background-color: $body-bg-light;
            border-bottom-color: $body-bg-dark;
        }

        .note-statusbar {
            border-top-color: $body-bg-dark;
            background-color: $body-bg-light;
        }
    }
}
